<template>
	<view>
		<view class="name" style="text-align: center;">{{details.name}}</view>
		<image :src="details.img" mode="" style="width: 100%; height: 190px;"></image>
		<view><b>距离：</b>你当前距离和{{details.name}}有<b>{{dis}}</b>km</view>
		<view class="intro"><b>简介：</b><br>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{details.intro}}
		</view>
		<button class="nav-button" style="width: fit-content;" @tap="setLine">导航去{{details.name}}</button>
	</view>
</template>

<script setup>
	body{
		background-color: gainsboro;
	}
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue'
	import {
		CONFIG
	} from "../../utils/config"
	import {
		getMapDistance
	} from "/utils/tools.js"

	import {
		userStore
	} from "../../store/userStore.js"
	const store = userStore()


	onLoad((data) => {
		console.log(data.id);
		getDetails((data.id))
	})

	let details = ref({})
	let dis = ref()
	async function getDetails(id) {
		let res = await uni.$get(CONFIG.leanCloud_url + "/1.1/classes/senicitem/" + id)
		console.log(res)
		if (res.statusCode == 200) {
			details.value = res.data

			console.log(store.currentPos)
			console.log(details.value.lon, details.value.lat)

			dis.value = getMapDistance(details.value.lat, details.value.lon, store.currentPos.latitude, store
				.currentPos.longitude)
		}
	}

	function setLine() {
		uni.navigateTo({
			url: `/pages/playWebView/playWebView?slat=${store.currentPos.latitude}&slon=${
				store.currentPos.longitude}&elat=${details.value.lat}&elon=${details.value.lon}&name=${details.value.name}`
		})
	}
</script>

<style scoped>
	.name {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.image {
		width: 100%;
		height: auto;
		margin-bottom: 10px;
	}

	;

	.distance {
		font-size: 18px;
		color: #555;
		margin-bottom: 20px;
		/* 距离信息与按钮之间的间距 */
	}
</style>